<template>
<div class="mainBody">
  <div class="mainImgBox">
    <div class="titleTop">
      <span class="fontHt">番剧视频链接添加</span>
    </div>
    <img src="http://mcgamehome.love/img/background/qOUe5d.jpg" alt="http://mcgamehome.love/img/background/qOUe5d.jpg">
  </div>
  <div class="nrBody">
    <div class="videoCs">
      <div class="videoShow">
        <video :src="nowSrc" controls ref="video"></video>
      </div>
      <div class="videoSrc">
        <div class="videoInput">
          <div class="inputBox">
            <input type="text" class="commentInput videoIn" v-model.trim="videoUrl" placeholder="测试的视频地址">
            <svg class="clearSpan" @click="clear" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z" fill="#C9CCD0"></path></svg>
          </div>
          <button type="button" class="commentUpButton fontHt" @click="videoCs">测试</button>
        </div>
        <div class="videotext">
          <textarea class="commentInput errorShow" type="text" placeholder="错误信息输出"></textarea>
          <button type="button" class="commentUpButton copyBut fontHt">复制</button>
        </div>
      </div>
    </div>
    <div v-for="(item, index) in addForms.urlList" :key="index">
      <div class="addVideoUrlBox">
        <!--      <div class="addWaike">-->
        <div class="addOne"><span>视频id</span><input class="commentInput marl20" v-model.trim="item.vId" type="text" placeholder="视频的文章id"></div>
        <div class="addOne"><span class="mar-l-10">当前集数</span><input class="commentInput" v-model.trim="item.vEpicName" type="text" placeholder="视频当前集数"></div>
        <div class="addOne"><span class="mar-l-10">视频类型</span><input class="commentInput" v-model.trim="item.vType" type="text" placeholder="视频类型"></div>
        <button type="button" class="commentUpButton zdy fontHt" @click="reMoveUrl(index)">删除</button>
        <!--      </div>-->
      </div>
      <div class="addOne"><span>视频链接</span><input class="commentInput" v-model.trim="item.vUrl" type="text" placeholder="视频链接"></div>
    </div>
    <div class="butBox">
      <button type="button" class="commentUpButton fontHt" @click="addUrl">添加</button>
      <button type="button" class="commentUpButton fontHt" @click="listUp">提交</button>
    </div>
  </div>
</div>
</template>

<script setup>
import {reactive, ref} from "vue";
import Hls from "hls.js";
import API from "@/api/AxiosConfig";

const addForms = reactive({
  urlList:[{
    vId:0,
    vEpicName:'',
    vType:'',
    vUrl:''
  }]
})
const nowSrc = ref('null')
const video = ref(null)
const videoUrl = ref(null)
const hlsjs = new Hls()
function videoCs() {
  console.log(videoUrl.value.substring(videoUrl.value.length-4))
  if (videoUrl.value.substring(videoUrl.value.length-4) === 'm3u8'){
    if (Hls.isSupported()) {
      hlsjs.loadSource(decodeURIComponent(videoUrl.value))
      hlsjs.attachMedia(video.value)
      hlsjs.on(Hls.Events.MANIFEST_PARSED, () => {

      })
      hlsjs.on(Hls.Events.ERROR, (event, data) => {
      })
    }
  }else {
    nowSrc.value = videoUrl.value
  }
}
function addUrl() {
  addForms.urlList.push({vId:addForms.urlList[0].vId, vEpicName:'', vType:addForms.urlList[0].vType, vUrl:''})
}
function listUp() {
  API({ url: '/api/urlListInsert', method: 'post' ,data:addForms.urlList}).then(res => {
    addForms.urlList = [{vId:0, vEpicName:'', vType:'', vUrl:''}]
  }).catch(err => {

  })
}
function reMoveUrl(i) {
  if (i<1){

  }else {
    addForms.urlList.splice(i,1)
  }
}
</script>

<style lang="less" scoped>
.butBox{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 30px 0;
}
.mar-l-10{
  margin-left: 10px;
}
.addWaike{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.addOne{
  flex: 1;
  display: flex;
  margin: 10px 0;
}
.addOne>span{
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-content: center;
  margin-right: 10px;
}
.addVideoUrlBox{
  width: 100%;
  display: flex;
  margin-top: 20px;
}
.inputBox{
  width: 100%;
  position: relative;
}
.clearSpan{
  position: absolute;
  flex: 0;
  right: 15px;
  top: 30%;
  display: none;
}
.videotext{
  display: flex;
  flex-direction: row;
  position: relative;
  height: 100%;
  flex: 1;
}
.videoInput{
  display: flex;
  flex-direction: row;
  position: relative;
  margin-bottom: 15px;
}
.commentUpButton{
  width: 80px;
  height: 45px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #2d8cf0;
  margin-left: 15px;
}
.copyBut{
  position: absolute;
  right: 5px;
  top: 5px;
  width: 45px;
  height: 25px;
  background-color: #b8b8b8;
}
.zdy{
  margin-top: 10px;
  background-color: deeppink;
}
.copyBut:hover{
  background-color: #2d8cf0;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 100%;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  background: #F1F2F3;
  font-family: 黑体;
  font-weight: bold;
}
.errorShow{
  height: 100%;
}
.marl20{
  margin-left: 18px;
}
.videoIn{
  padding-right: 25px;
}
.commentInput:hover{
  background: white;
}
.videoSrc{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
  width: 100%;
  flex: 1;
  padding: 10px 0 10px 15px;

}
.videoCs{
  display: flex;
  flex-direction: row;
  width: 100%;
}
.videoShow>video{
  width: 450px;
  height: 250px;
}
.nrBody{
  display: flex;
  padding: 35px 35px;
  flex-direction: column;
  font-family: 黑体;
  font-weight: bold;
}
.mainBody{
  display: flex;
  width: 100%;
  flex-direction: column;
}
.mainImgBox{
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.mainImgBox>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.titleTop{
  color: #FFFFFF;
  font-size: 40px;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  z-index: 1;
  user-select: none;
}
.fontHt{
  font-family: 黑体;
  font-weight: bold;
}
@media screen and (min-width: 2061px) {
  .nrBody {
    width: 1680px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .nrBody {
    margin: 0 140px 0 140px;
  }
}
</style>
